<template>
  <div id="patrol-feedback">
    <van-nav-bar title="巡查反馈" left-arrow @click-left="onClickLeft" fixed />
    <div class="personal-info">
      <span class="img-box">
        <img :src="feedbackList.image" alt />
      </span>
      <span class="details1">
        <p class="id-style">{{feedbackList.id}}</p>
        <p>
          <span>{{feedbackList.username}} &nbsp;| &nbsp;</span>
          <span>{{feedbackList.gender == 1?"男":(feedbackList.gender == 2?"女":"未知") }} &nbsp;| &nbsp;</span>
          <span>{{feedbackList.age}}</span>
        </p>
        <p>联系电话: {{feedbackList.phone}}</p>
        <p>家庭住址: {{feedbackList.community}} {{feedbackList.communityName}} {{feedbackList.building}} {{feedbackList.unit}}</p>
      </span>
    </div>
    <div class="feedback-form">
      <van-cell-group>
        <form>
          <span class="label-style label-width">老人状态</span>
          <span class="select-box">
            <span class="select-style" @click="optionClick()">
              {{statusText}}
              <van-icon name="arrow-down" v-if="listFlag == false" />
              <van-icon name="arrow-up" v-if="listFlag" />
            </span>
            <ul v-if="listFlag">
              <li
                v-for="item in statusList"
                :key="item.id"
                @click="liClick(item)"
              >{{item.value}}</li>
            </ul>
          </span>
        </form>
        <span class="label-style">描述状态</span>
        <van-field
          v-model="message"
          autosize
          type="textarea"
          maxlength="100"
          placeholder="请详细描述老人状态信息（包含疾病信息）……"
          class="textarea-style"
        />
        <span class="text-count">{{currentLength}}/{{maxlength}}</span>
      </van-cell-group>
      <span class="picture-upload label-style">照片上传</span>
      <van-uploader 
        v-model="fileList"
        multiple
        :max-count="6"
        :after-read="afterRead"
        :before-read="otherBeforeRead"
        @delete="handleFileDel"/>
      <!-- <span >
                图片最多不超过6张
      </span>-->
      <van-button class="pay_btn" @click="immediatePay()">提交</van-button>
      <van-popup v-model="showLoading">
        <van-loading color="#DC4630" />
      </van-popup>
    </div>
  </div>
</template>
<script>
import api from "@/controller/agedService.js";
import constant from "@/controller/constant.js";
export default {
  name: "patrolFeedback",
  data() {
    return {
      message: "",
      feedbackList: {},
      fileList: [],
      fileImageList: new Map(),
      maxlength: 100,
      statusList: [
        {
          id: 1,
          value: "正常",
          status: 1
        },
        {
          id: 2,
          value: "异常",
          status: 2
        }
      ],
      listFlag: false,
      statusText: "正常",
      statusNumber: 1,
      uid: "",
      urlList: [],
      showLoading: false
      // disabled: false
    };
  },
  computed: {
    currentLength: function() {
      return this.message.length;
    }
  },
  created() {
    this.uid = this.$route.query.id
    this.getAgeDetail(this.uid)
  },
  methods: {
    // 文件删除前的回调函数
    handleFileDel(file) {
      this.fileImageList.delete(file.file.lastModified)
      this.urlList = [...this.fileImageList.values()].join(',')
    },
    // 文件读取前的回调函数
    otherBeforeRead(file) {
      const acceptImgs = ['image/jpeg', 'image/png', 'image/jpg']
      if (!acceptImgs.includes(file.type)) {
        this.$toast('请上传JPG或者PNG格式的图片!')
        return false
      }
      this.showLoading = true
      return true
    },
    onClickLeft() {
      this.$router.go(-1);
      // this.$router.push({path:'/work/patrolList'})
    },
    // 切换老人状态值显示
    optionClick() {
      this.listFlag = !this.listFlag;
    },
    // 获取老人状态值
    liClick(val) {
      this.statusText = val.value;
      this.statusNumber = val.status;
      this.listFlag = false;
    },
    // 文件读取之后的回调函数
    afterRead(file) {
      // 图片上传
      if(file instanceof Array){
        // file等于Array
        file.forEach(item => {
          api.upload_image(item.file).then(res => {
            if(res.data.code === '0') {
              this.$toast('图片上传成功！')
              this.showLoading = false
              this.fileImageList.set(item.file.lastModified, res.data.datas)
              this.urlList = [...this.fileImageList.values()].join(',')
            }
          })
        })
      } else {
        // file等于Object
        api.upload_image(file.file).then(res => {
          if(res.data.code === '0') {
            this.$toast('图片上传成功！')
            this.showLoading = false
            this.fileImageList.set(file.file.lastModified, res.data.datas)
            this.urlList = [...this.fileImageList.values()].join(',')
          }
        })
      }
    },
    // 提交
    immediatePay() {
      this.uid = this.$route.query.id;
     
      this.urlList = JSON.stringify(this.urlList).replace(/\[|]|"/g, "") 
      const data = {
        "archiveId": this.uid,
        "images": this.urlList,
        "remark": this.message,
        "result": this.statusNumber
      }
      api 
      .pensionRecord_v1_create(data) 
      .then(res => {  
        this.$toast("提交成功");
        this.$router.go(-1);
        return res;
      })
      .catch(() => {
        this.$toast(constant.netErrMsg)
      })
    },
    // 获取老人详情
    getAgeDetail(val) {
      this.showLoading = true
      const data = {
        "curPage": "",
        "pageSize": ""
      }
      api
        .pensionCare_v1_get(val, data)
        .then(res => {
          this.showLoading = false
          this.feedbackList = res.datas.careArchiveEntity
        })
        .catch(() => {
          this.$toast(constant.netErrMsg);
        });
    }
  }
};
</script>
<style lang="scss" scope>
// @import '../../styles/workstation.scss';
@import "../../styles/workstation.scss";

#patrol-feedback {
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #333333;
  letter-spacing: 0;
  .personal-info {
    background: #ffffff;
    padding: 15px;
    border-bottom: 0.5px solid #e2e2e2;
    .img-box {
      display: inline-block;
      width: 50px;
      height: 50px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 100%;
      }
    }
    .details1 {
      display: inline-block;
      vertical-align: middle;
      width: calc(100vw - 140px);
      margin-left: 10px;
      line-height: 20px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #666666;
      letter-spacing: 0;
      // margin-top: 5px;
      p {
        margin-top: 5px;
      }
      .id-style {
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0;
        line-height: 22.5px;
        margin-top: 0 !important;
      }
    }
  }
  .feedback-form {
    text-align: center;
    height: calc(100vh - 175px);
    background: #ffffff;
    .label-style {
      display: inline-block;
      width: 345px;
      text-align: left;
      line-height: 40px;
      font-size: 14px;
      color: #666666;
    }
    .label-width {
      width: 56px;
      margin-right: 10px;
      line-height: 28px;
      display: inline-block;
      vertical-align: bottom;
    }
    .select-style {
      display: inline-block;
      vertical-align: bottom;
      font-size: 14px;
      width: 278px;
      background: #f5f5f5;
      height: 28px;
      line-height: 28px;
      margin-top: 15px;
      position: relative;
    }
    .select-box {
      text-align: left;
      text-indent: 1em;
      ul {
        border: 0.5px solid #e2e2e2;
        width: 278px;
        position: absolute;
        z-index: 111;
        right: 15px;
        background: #ffffff;
        li {
          line-height: 28px;
          padding-left: 5px;
          font-size: 14px;
        }
        li:hover {
          background: #dedede;
        }
      }
      i {
        position: absolute;
        top: 5px;
        right: 5px;
      }
    }
    .textarea-style {
      width: 345px;
      height: 130px;
      background: #f5f5f5;
      left: 15px;
      margin-bottom: 5px;
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #999999;
      letter-spacing: 0;
      padding: 6.5px 9.5px;
    }
    .text-count {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #999999;
      letter-spacing: 0;
      position: absolute;
      right: 25px;
      bottom: 10px;
    }
  }
  .van-uploader {
    width: 360px;
    margin-left: 15px;
    .van-uploader__preview-image {
      width: 110px;
      height: 82px;
    }
    .van-uploader__upload {
      width: 110px;
      height: 82px;
    }
  }
  .pay_btn {
    width: 345px;
    margin: 0 15px;
    border-radius: 22px;
    background: #dc4630;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    position: fixed;
    left: 0;
    bottom: 15px;
  }
}
</style>